<template>
<yd-layout>
  <!-- 头部导航 -->
  <head-search slot="navbar"></head-search>
  <!-- /头部导航 -->

  <!-- 主体内容 -->
  <section>
    <!-- 轮播图 -->
    <yd-slider autoplay="3000">
      <yd-slider-item v-for="(banner,key) in banners" :key="key">
        <a href="#">
            <img :src="banner">
        </a>
      </yd-slider-item>
    </yd-slider>
    <!-- /轮播图 -->

    <div class="wrap">
      <!-- 每日签到/限时抢购/会员专享/好货拼团/分享领卷 -->
      <yd-flexbox style="height:1.7rem">
        <yd-flexbox-item>
          <a href="#" class="icon-link">
            <img src="../assets/icon/ico1.png" alt="">
            <p>每日签到</p>
          </a>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <a href="#" class="icon-link">
            <img src="../assets/icon/ico2.png" alt="">
            <p>限时抢购</p>
          </a>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <a href="#" class="icon-link">
            <img src="../assets/icon/ico3.png" alt="">
            <p>会员专享</p>
          </a>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <a href="#" class="icon-link">
            <img src="../assets/icon/ico4.png" alt="">
            <p>好货拼团</p>
          </a>
        </yd-flexbox-item>
        <yd-flexbox-item>
          <a href="#" class="icon-link">
            <img src="../assets/icon/ico5.png" alt="">
            <p>分享领卷</p>
          </a>
        </yd-flexbox-item>
      </yd-flexbox>
      <!-- /每日签到/限时抢购/会员专享/好货拼团/分享领卷 -->

      <div class="flexbox">
        <a href="#"><img src="/static/img/cf-1.jpg"></a>
        <a href="#"><img src="/static/img/cf-3.jpg"></a>
      </div>
      <div class="flexbox-scroll">
        <a href="#" class="flexbox-scroll-item"><img src="/static/img/tou-1.jpg"></a>
        <a href="#" class="flexbox-scroll-item"><img src="/static/img/tou-2.jpg"></a>
        <a href="#" class="flexbox-scroll-item"><img src="/static/img/tou-3.jpg"></a>
        <a href="#" class="flexbox-scroll-item"><img src="/static/img/tou-4.jpg"></a>
        <a href="#" class="flexbox-scroll-item"><img src="/static/img/tou-5.jpg"></a>
        <a href="#" class="flexbox-scroll-item"><img src="/static/img/tou-6.jpg"></a>
      </div>
    </div>

    <div class="wrap" style="margin-top: 0.2rem;padding-bottom:0.4rem">
			<product-section 
				v-for="(list,key) in sections"
				:key="key"
				:list="list"
				:section-img="sectionImgs[key]"
			></product-section>
		</div>

    <!-- 为你推荐 -->
    <div>
      <h2><img src="/static/img/icon-tj1.jpg" width="100%"></h2>
      <yd-infinitescroll :callback="loadRecommendList" ref="recommendGoods">
        <yd-list theme="3" slot="list">
          <yd-list-item v-for="(item, key) in recommend" :key="key" type="link" :href="'/product/'+item.pid">
            <img slot="img" :src="item.img">
            <span slot="title" class="title">{{item.title}}</span>
            <yd-list-other slot="other">
              <span class="price">¥<em>{{item.price}}</em></span>
              <span>已售{{item.count}}件</span>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
        <span slot="doneTip">没有更多数据</span>
        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
      </yd-infinitescroll>
    </div>
    <!-- /为你推荐 -->

  </section>
  <!-- 主体内容 -->

  <!-- 底部导航 -->
  <foot-tab slot="tabbar"></foot-tab> 
  <!-- /底部导航 -->
</yd-layout>
</template>

<script>
import ProductSection from '@/components/ProductSection'
export default {
	data(){
		return {
      banners: [
        '/static/img/banner.jpg',
        '/static/img/banner1.jpg',
        '/static/img/banner2.jpg',
        '/static/img/banner3.jpg'
      ],
			sections: null,
			sectionImgs: {
				section1: '/static/img/cf-4.jpg',
				section2: '/static/img/cf-5.jpg',
				section3: '/static/img/cf-7.jpg',
				section4: '/static/img/cf-6.jpg'
      },
      recommend: [],
      page: 1,
      pageSize: 8,
      pageCount: 0
		}
  },
  methods: {
    loadSectionList(){
      this.$http.jsonp('http://localhost:3000/product/list')
      .then(response=>{
        this.sections = response.body;
      });
    },
    loadRecommendList(){
      this.$http.jsonp('http://localhost:3000/product/recommend',{
        params:{
          page: this.page,
          pageSize: this.pageSize,
          pageCount: this.pageCount
        }
      }).then(response=>{
        this.pageCount = response.body.pageCount;
        const _recommend = response.body.data;
        this.recommend = [...this.recommend, ..._recommend];
        

        if (_recommend.length < this.pageSize || this.page == this.pageCount) {
          /* 所有数据加载完毕 */
          this.$refs.recommendGoods.$emit('ydui.infinitescroll.loadedDone');
          return;
        }

        /* 单次请求数据完毕 */
        this.$refs.recommendGoods.$emit('ydui.infinitescroll.finishLoad');

        this.page++;
			});
    }
  },
	mounted(){
		this.loadSectionList();
    this.loadRecommendList();
	},
  components: { ProductSection }
}
</script>

<style lang="less" scoped>
.icon-link {
  display: block;
  text-align: center;
  img {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.price {
  padding-right: 0.08rem;
  line-height: 1;
  color: #e73c3c;
  em { font-size: 14px; }
}
.title {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  height: 42px;
  width: 100%;
}
</style>
